<template>
  <div class="not-found">
    <h1>404 - Page Not Found</h1>
    <p>摸会鱼吧!</p>
    <div id="game-container" ref="gameContainer">
      <button v-if="gameOver" @click="resetGame">重新开始</button>
      <canvas ref="gameCanvas"></canvas>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, onUnmounted, watch } from 'vue';


const gameContainer = ref(null);
const gameCanvas = ref(null);
let snake = [{ x: 10, y: 10 }];
let food = { x: 15, y: 15 };
let direction = 'right';
let gameOver = ref(false);
let intervalId;

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

onMounted(() => {
  canvas.width = 400;
  canvas.height = 400;
  gameCanvas.value = canvas;
  gameContainer.value.appendChild(canvas);
  // 添加边框样式
  canvas.style.border = '1px solid #ccc';

  startGame();
});

onUnmounted(() => {
  clearInterval(intervalId);
});

function startGame() {
  intervalId = setInterval(() => {
    if (gameOver.value) return;
    update();
    draw();
  }, 100);
}

function update() {
  const head = { ...snake[0] };
  switch (direction) {
    case 'up': head.y--; break;
    case 'down': head.y++; break;
    case 'left': head.x--; break;
    case 'right': head.x++; break;
  }

  if (head.x < 0 || head.x >= 40 || head.y < 0 || head.y >= 40) {
    gameOver.value = true;
    return;
  }

  for (let i = 1; i < snake.length; i++) {
    if (head.x === snake[i].x && head.y === snake[i].y) {
      gameOver.value = true;
      return;
    }
  }

  snake.unshift(head);
  if (head.x === food.x && head.y === food.y) {
    food = generateFood();
  } else {
    snake.pop();
  }
}

function generateFood() {
  let x = Math.floor(Math.random() * 40);
  let y = Math.floor(Math.random() * 40);
  while (snake.some(s => s.x === x && s.y === y)) {
    x = Math.floor(Math.random() * 40);
    y = Math.floor(Math.random() * 40);
  }
  return { x, y };
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#00ff00';
  snake.forEach(segment => {
    ctx.fillRect(segment.x * 10, segment.y * 10, 10, 10);
  });
  ctx.fillStyle = '#ff0000';
  ctx.fillRect(food.x * 10, food.y * 10, 10, 10);
}

function resetGame() {
  snake = [{ x: 10, y: 10 }];
  food = { x: 15, y: 15 };
  direction = 'right';
  gameOver.value = false;
}

watch(gameOver, () => {
  if (gameOver.value) {
    clearInterval(intervalId);
  } else {
    startGame();
  }
});

document.addEventListener('keydown', e => {
  if (gameOver.value) return;
  switch (e.key) {
    case 'ArrowUp':
      if (direction !== 'down') direction = 'up';
      break;
    case 'ArrowDown':
      if (direction !== 'up') direction = 'down';
      break;
    case 'ArrowLeft':
      if (direction !== 'right') direction = 'left';
      break;
    case 'ArrowRight':
      if (direction !== 'left') direction = 'right';
      break;
  }
});
</script>

<style>
.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh; /* 使容器至少占满视口高度 */
  text-align: center;
  padding-top: 50px;
}

#game-container {
  position: relative;
  width: 400px;
  height: 400px;
}

button {
  position: absolute;
  bottom: -60px; /* 调整按钮的位置，避免使用Flexbox中的绝对定位 */
  left: 50%;
  transform: translateX(-50%);
  padding: 1rem 2rem;
  font-size: 1.2rem;
  color: white;
  background-color: #007BFF;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

button:hover {
  background-color: #0056b3;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}
</style>